<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>07_造一个组件</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
  <!-- 准备好一个容器-->
  <div id="demo">

    <!-- <h1>--人员信息--</h1>
    <h2>学生名字:{{personName}}</h2>
    <h2>学生年龄:{{personAge}}</h2>
    <button @click="showPerson">点我显示人员信息</button>
    <hr>
    <h1>--学校信息--</h1>
    <h2>学校名字:{{schoolName:}}</h2>
    <h2>地址:{{SchoolAddress}}</h2>
    <button @click="showschool">点我显学校信息</button> -->

  </div>
</body>

<script type="text/javascript">
  //阻止 vue 在启动时生成生产提示。
  Vue.config.productionTip = false;


  //关于人员的组件
  let Person = Vue.extend({
    data() {
      return {
        personName: '刘哈哈',
        personAge: '18',
      }
    },
    methods: {
      showPerson() {
        alert(`我叫${this.personName},我今年${this.personAge}岁了,嘻嘻`)
      }
    },
    template: `<div>
                   <h1>--人员信息--</h1>
                   <h2>学生名字:{{personName}}</h2>
                   <h2>学生年龄:{{personAge}}</h2>
                   <button @click="showPerson">点我显示人员信息</button>
              </div>`
  })
  // 关于学校的组件
  let School = Vue.extend({
    data() {
      return {
        schoolName: '宣化科技职业学院',
        schlolAdress: '张家口宣化区',
      }
    },
    methods: {
      showschool() {
        alert(`${this.schoolName} 坐落于 ${this.schlolAdress} 已经有好几十年的历史了`)
      }
    },
    template: `<div>
                   <h1>--学校信息--</h1>
                   <h2>学校名字:{{schoolName}}</h2>
                   <h2>地址:{{schlolAdress}}</h2>
                   <button @click="showschool">点我显学校信息</button>
              </div>`
  })

  // 创建代表的App组件
  let App = Vue.extend({
    components: { Person, School },
    template: `
      <div>
        <Person></Person>
        <School></School>
        </div>
    `
  })

  // 创建vue的实例
  new Vue({
    el: '#demo',
    components: { App },
    template: `<App></App>`
  })
</script>

</html>